<template>
	<view class="agreement-summary-container">
		<view class="header">
			<text class="title">协议管理</text>
			<text class="subtitle">管理您的隐私设置和协议状态</text>
		</view>
		
		<view class="content">
			<view class="status-card">
				<view class="status-header">
					<text class="status-title">协议状态</text>
					<text class="status-badge" :class="{ 'complete': allAgreed }">{{ allAgreed ? '已完成' : '未完成' }}</text>
				</view>
				<view class="status-progress">
					<text class="progress-text">{{ agreedCount }}/2 项协议已同意</text>
					<view class="progress-bar">
						<view class="progress-fill" :style="{ width: progressPercent + '%' }"></view>
					</view>
				</view>
			</view>
			
			<view class="agreement-list">
				<view class="agreement-item">
					<view class="agreement-info">
						<view class="agreement-header">
							<text class="agreement-title">隐私政策</text>
							<text class="agreement-status" :class="{ 'agreed': summary.privacyPolicy.agreed }">{{ summary.privacyPolicy.agreed ? '✓ 已同意' : '✗ 未同意' }}</text>
						</view>
						<text class="agreement-desc">了解我们如何收集、使用和保护您的个人信息</text>
						<text v-if="summary.privacyPolicy.agreeTime" class="agreement-time">同意时间：{{ formatTime(summary.privacyPolicy.agreeTime) }}</text>
					</view>
					<view class="agreement-actions">
						<BrandButton 
							text="查看"
							type="outline"
							size="small"
							@click="viewPrivacyPolicy"
						></BrandButton>
					</view>
				</view>
				
				<view class="agreement-item">
					<view class="agreement-info">
						<view class="agreement-header">
							<text class="agreement-title">用户协议</text>
							<text class="agreement-status" :class="{ 'agreed': summary.userAgreement.agreed }">{{ summary.userAgreement.agreed ? '✓ 已同意' : '✗ 未同意' }}</text>
						</view>
						<text class="agreement-desc">了解使用我们服务时的权利和义务</text>
						<text v-if="summary.userAgreement.agreeTime" class="agreement-time">同意时间：{{ formatTime(summary.userAgreement.agreeTime) }}</text>
					</view>
					<view class="agreement-actions">
						<BrandButton 
							text="查看"
							type="outline"
							size="small"
							@click="viewUserAgreement"
						></BrandButton>
					</view>
				</view>
			</view>
			
			<view class="version-info">
				<text class="version-title">协议版本信息</text>
				<view class="version-item">
					<text class="version-label">当前版本：</text>
					<text class="version-value">v1.0.0</text>
				</view>
				<view class="version-item">
					<text class="version-label">最后更新：</text>
					<text class="version-value">2024年1月1日</text>
				</view>
			</view>
		</view>
		
		<view class="footer">
			<view class="action-buttons">
				<BrandButton 
					text="重新阅读协议"
					type="outline"
					size="large"
					@click="rereadAgreements"
				></BrandButton>
				
				<BrandButton 
					text="撤销同意"
					type="danger"
					size="large"
					@click="revokeAgreements"
				></BrandButton>
			</view>
			
			<view class="footer-note">
				<text class="note-text">注意：撤销同意将清除您的所有数据并退出应用</text>
			</view>
		</view>
	</view>
</template>

<script>
import BrandButton from '@/components/BrandButton.vue'
import { 
	getAgreementSummary,
	clearAllAgreements,
	showAgreementPages
} from '@/utils/agreementManager.js'

export default {
	name: 'AgreementSummary',
	components: {
		BrandButton
	},
	data() {
		return {
			summary: {
				privacyPolicy: { agreed: false, agreeTime: null },
				userAgreement: { agreed: false, agreeTime: null },
				allAgreed: false
			}
		}
	},
	computed: {
		allAgreed() {
			return this.summary.allAgreed
		},
		agreedCount() {
			let count = 0
			if (this.summary.privacyPolicy.agreed) count++
			if (this.summary.userAgreement.agreed) count++
			return count
		},
		progressPercent() {
			return (this.agreedCount / 2) * 100
		}
	},
	onLoad() {
		this.loadAgreementSummary()
	},
	onShow() {
		// 页面显示时重新加载状态
		this.loadAgreementSummary()
	},
	methods: {
		/**
		 * 加载协议摘要
		 */
		loadAgreementSummary() {
			this.summary = getAgreementSummary()
		},
		
		/**
		 * 格式化时间
		 */
		formatTime(isoString) {
			if (!isoString) return '未知'
			
			try {
				const date = new Date(isoString)
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				})
			} catch (error) {
				return '格式错误'
			}
		},
		
		/**
		 * 查看隐私政策
		 */
		viewPrivacyPolicy() {
			uni.navigateTo({
				url: '/pages/privacy-policy/privacy-policy'
			})
		},
		
		/**
		 * 查看用户协议
		 */
		viewUserAgreement() {
			uni.navigateTo({
				url: '/pages/user-agreement/user-agreement'
			})
		},
		
		/**
		 * 重新阅读协议
		 */
		rereadAgreements() {
			uni.showModal({
				title: '重新阅读协议',
				content: '这将引导您重新阅读所有协议条款',
				success: (res) => {
					if (res.confirm) {
						showAgreementPages('both')
					}
				}
			})
		},
		
		/**
		 * 撤销协议同意
		 */
		revokeAgreements() {
			uni.showModal({
				title: '撤销同意',
				content: '撤销同意将清除您的所有数据并退出应用，此操作不可恢复，确定要继续吗？',
				confirmText: '确定撤销',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						this.performRevoke()
					}
				}
			})
		},
		
		/**
		 * 执行撤销操作
		 */
		performRevoke() {
			try {
				// 清除所有协议同意状态
				clearAllAgreements()
				
				// 清除用户数据
				uni.clearStorageSync()
				
				uni.showToast({
					title: '已撤销同意',
					icon: 'success'
				})
				
				// 跳转到协议检查页面
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/agreement-check/agreement-check'
					})
				}, 2000)
			} catch (error) {
				uni.showToast({
					title: '撤销失败',
					icon: 'error'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>

.agreement-summary-container {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: $bg-secondary;
	padding: 40rpx;
	box-sizing: border-box;
}

.header {
	margin-bottom: 40rpx;
	
	.title {
		display: block;
		font-size: 36rpx;
		font-weight: 700;
		color: $text-primary;
		margin-bottom: 10rpx;
	}
	
	.subtitle {
		display: block;
		font-size: 26rpx;
		color: $text-secondary;
	}
}

.content {
	flex: 1;
	
	.status-card {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		
		.status-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20rpx;
			
			.status-title {
				font-size: 28rpx;
				font-weight: 600;
				color: $text-primary;
			}
			
			.status-badge {
				padding: 8rpx 16rpx;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 500;
				background: $warning-bg;
				color: $warning-color;
				
				&.complete {
					background: $success-bg;
					color: $success-color;
				}
			}
		}
		
		.status-progress {
			.progress-text {
				display: block;
				font-size: 24rpx;
				color: $text-secondary;
				margin-bottom: 12rpx;
			}
			
			.progress-bar {
				height: 6rpx;
				background: $border-light;
				border-radius: 3rpx;
				overflow: hidden;
				
				.progress-fill {
					height: 100%;
					background: linear-gradient(90deg, $brand-primary 0%, $brand-secondary 100%);
					border-radius: 3rpx;
					transition: width 0.3s ease;
				}
			}
		}
	}
	
	.agreement-list {
		margin-bottom: 30rpx;
		
		.agreement-item {
			display: flex;
			background: white;
			border-radius: 20rpx;
			padding: 30rpx;
			margin-bottom: 20rpx;
			box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
			
			.agreement-info {
				flex: 1;
				margin-right: 20rpx;
				
				.agreement-header {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 12rpx;
					
					.agreement-title {
						font-size: 28rpx;
						font-weight: 600;
						color: $text-primary;
					}
					
					.agreement-status {
						font-size: 24rpx;
						color: $error-color;
						
						&.agreed {
							color: $success-color;
						}
					}
				}
				
				.agreement-desc {
					display: block;
					font-size: 24rpx;
					color: $text-secondary;
					line-height: 1.4;
					margin-bottom: 8rpx;
				}
				
				.agreement-time {
					display: block;
					font-size: 22rpx;
					color: $text-tertiary;
				}
			}
		}
	}
	
	.version-info {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
		
		.version-title {
			display: block;
			font-size: 28rpx;
			font-weight: 600;
			color: $text-primary;
			margin-bottom: 20rpx;
		}
		
		.version-item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 12rpx;
			
			.version-label {
				font-size: 26rpx;
				color: $text-secondary;
			}
			
			.version-value {
				font-size: 26rpx;
				color: $text-primary;
				font-weight: 500;
			}
		}
	}
}

.footer {
	padding-top: 40rpx;
	
	.action-buttons {
		display: flex;
		gap: 20rpx;
		margin-bottom: 20rpx;
		
		:deep(.brand-button) {
			flex: 1;
		}
	}
	
	.footer-note {
		text-align: center;
		
		.note-text {
			font-size: 22rpx;
			color: $text-tertiary;
			line-height: 1.4;
		}
	}
}
</style>